<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日常工作问题记录系统</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 顶部导航栏 -->
        <header class="header">
            <h1>日常工作问题记录系统</h1>
            <div class="header-actions">
                <button id="new-log-btn" class="btn primary-btn">新建记录</button>
                <button id="export-btn" class="btn secondary-btn">导出数据</button>
                <button id="settings-btn" class="btn secondary-btn">设置</button>
            </div>
        </header>

        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 左侧记录列表 -->
            <aside class="sidebar">
                <div class="sidebar-header">
                    <h2>记录列表</h2>
                    <div class="search-container">
                        <input type="text" id="search-input" placeholder="搜索记录...">
                        <button id="search-btn">搜索</button>
                    </div>
                </div>
                
                <div class="template-section">
                    <h3>模板</h3>
                    <div class="template-list">
                        <button class="template-btn" data-template="daily">日常记录</button>
                        <button class="template-btn" data-template="problem">问题解决</button>
                        <button class="template-btn" data-template="project">项目总结</button>
                    </div>
                </div>
                
                <div class="log-list">
                    <!-- 记录列表将通过JavaScript动态生成 -->
                    <div class="no-logs">暂无记录，请点击上方"新建记录"按钮创建</div>
                </div>
            </aside>

            <!-- 右侧编辑区域 -->
            <section class="editor-section">
                <div class="editor-header">
                    <input type="text" id="log-title" placeholder="记录标题（例如：2023-10-01 日常记录）">
                    <div class="editor-actions">
                        <button id="save-btn" class="btn primary-btn">保存记录</button>
                        <button id="delete-btn" class="btn danger-btn">删除记录</button>
                    </div>
                </div>
                
                <div class="editor-content">
                    <div class="editor-tabs">
                        <button class="tab-btn active" data-tab="editor">编辑视图</button>
                        <button class="tab-btn" data-tab="preview">预览</button>
                    </div>
                    
                    <div class="tab-content">
                        <!-- 编辑视图 -->
                        <div class="tab-pane active" id="editor-pane">
                            <div class="editor-form">
                                <div class="form-group">
                                    <label for="log-date">日期：</label>
                                    <input type="date" id="log-date">
                                </div>
                                
                                <div class="form-group">
                                    <label for="today-tasks">今日工作内容：</label>
                                    <textarea id="today-tasks" rows="4" placeholder="- [ ] 任务1
- [ ] 任务2
- [ ] 任务3"></textarea>
                                    <button id="add-task-btn" class="btn small-btn">添加任务</button>
                                </div>
                                
                                <div class="form-group">
                                    <label>遇到的问题：</label>
                                    <div id="problems-container">
                                        <div class="problem-item">
                                            <h4>问题1：</h4>
                                            <textarea class="problem-description" rows="2" placeholder="问题描述"></textarea>
                                            <textarea class="problem-scene" rows="1" placeholder="出现场景"></textarea>
                                            <textarea class="problem-scope" rows="1" placeholder="影响范围"></textarea>
                                            <textarea class="problem-methods" rows="1" placeholder="尝试过的方法"></textarea>
                                            <textarea class="problem-error" rows="1" placeholder="错误信息（如有）"></textarea>
                                        </div>
                                    </div>
                                    <button id="add-problem-btn" class="btn small-btn">添加问题</button>
                                </div>
                                
                                <div class="form-group">
                                    <label>解决方案：</label>
                                    <div id="solutions-container">
                                        <div class="solution-item">
                                            <h4>解决方案1：</h4>
                                            <textarea class="solution-steps" rows="2" placeholder="解决步骤"></textarea>
                                            <textarea class="solution-code" rows="3" placeholder="关键代码/配置（如有）"></textarea>
                                            <textarea class="solution-notes" rows="1" placeholder="注意事项"></textarea>
                                        </div>
                                    </div>
                                    <button id="add-solution-btn" class="btn small-btn">添加解决方案</button>
                                </div>
                                
                                <div class="form-group">
                                    <label for="learnings">学习与收获：</label>
                                    <textarea id="learnings" rows="2" placeholder="-
-"></textarea>
                                </div>
                                
                                <div class="form-group">
                                    <label for="tomorrow-plan">明日计划：</label>
                                    <textarea id="tomorrow-plan" rows="2" placeholder="- [ ] 任务1
- [ ] 任务2
- [ ] 任务3"></textarea>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 预览视图 -->
                        <div class="tab-pane" id="preview-pane">
                            <div class="markdown-preview">
                                <h2 id="preview-title">预览</h2>
                                <div id="preview-content">
                                    <!-- 预览内容将通过JavaScript动态生成 -->
                                    <p>请先填写内容并点击保存，然后切换到预览视图。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- 设置模态框 -->
    <div id="settings-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>设置</h3>
                <span class="close-modal">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="theme-select">主题：</label>
                    <select id="theme-select">
                        <option value="light">浅色主题</option>
                        <option value="dark">深色主题</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="auto-save">自动保存：</label>
                    <input type="checkbox" id="auto-save" checked>
                </div>
                <div class="form-group">
                    <label for="save-interval">自动保存间隔（秒）：</label>
                    <input type="number" id="save-interval" min="5" max="300" value="30">
                </div>
            </div>
            <div class="modal-footer">
                <button id="save-settings-btn" class="btn primary-btn">保存设置</button>
                <button id="cancel-settings-btn" class="btn secondary-btn">取消</button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>